<template>
    <div class="layout">
        <div class="menu">
            <Menu   :isCollapse="isCollapse"></Menu>
        </div>
        <div class="content" :class="{sodao:isCollapse}">
            <Content  @soshow="soshow" :isCollapse="isCollapse"></Content>
        </div>
        
    </div>

</template>


<script>
import Menu from "../view/layout/Menu"
import Content from "../view/layout/Content"


export default {
  components: { Menu ,Content},
    name:'List',
    data() {
      return {
        
        isCollapse: false
      };
    },
    methods:{
        soshow(){
            this.isCollapse=!this.isCollapse
        }
    },
    
    beforeDestroy() {
      
      clearInterval(console.log('测试 是否清除'))
    },
    
}
</script>
<style lang="less" scoped>
.layout{
    // display: flex;
    .menu{
        // width: 200px;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        background-color: #112f50;
    }
    .content{
        padding-left: 200px;
        transition: 0.8s;
    }
    .sodao{
        padding-left: 64px;
        transition:  0.2s;
    }

}
</style>